<template>
  <div>
    <div class="slot">
      <div class="top">
        <div class="return" @click="goback">
          <img src="@/assets/my/zuo.png" alt />
        </div>
        <span>支出明细</span>
      </div>
    </div>
    <div class="main">
      <div class="top_title">
        <div :class="active==1?'li1':'li'" @click="changeactive(1)">
          <div class="p1">月支出</div>
          <span class="span"></span>
        </div>
        <div :class="active==2?'li1':'li'" @click="changeactive(2)">
          <div class="p1">年支出</div>
          <span class="span"></span>
        </div>
      </div>
      <!-- 月收益 -->
      <div v-show="active==1">
        <div class="main3">
          <div class="center">
            <div class="cont_left">
              <div class="cd_top">
                共
                <span>{{info.count}}</span>笔，合计：
              </div>
              <div class="cd_price">
                ￥
                <span v-if="info.count!=0">{{info.amount_total}}</span>
                <span v-if="info.count==0">0.00</span>
              </div>
            </div>
            <div class="cont_right" @click="nianyue">
              <div class="time">{{year}}年{{month}}月</div>
              <div class="icon">
                <img  style="line-height:130px;" src="@/assets/pblic/xiajt.png" alt />
              </div>
            </div>
          </div>
        </div>
        <div class="main4">
          <div class="aa" v-if="info.count!=0">
            <div class="cd_li" v-for="item in list" :key="item.name">
              <div class="cent_left">
                <img src="@/assets/pblic/yuan.png" alt />
                <div class="time1">{{item.date}}</div>
              </div>
              <div class="cent_right">
                ￥
                <span>{{item.total}}</span>
              </div>
            </div>
          </div>
          <div class="noshuju" v-if="info.count==0">暂无数据~</div>
        </div>
      </div>
      <!-- 年收益 -->
      <div v-show="active==2">
        <div class="main3">
          <div class="center">
            <div class="cont_left">
              <div class="cd_top">
                共
                <span>{{info.count}}</span>笔，合计：
              </div>
              <div class="cd_price">
                ￥
                <span v-if="info.count!=0">{{info.amount_total}}</span>
                <span v-if="info.count==0">0.00</span>
              </div>
            </div>
            <div class="cont_right" @click="nianyue">
              <div class="time">{{year}}年</div>
              <div class="icon">
                <img style="line-height:130px;" src="@/assets/pblic/xiajt.png" alt />
              </div>
            </div>
          </div>
        </div>
        <div class="main4">
          <div class="aa" v-if="info.count!=0">
            <div class="cd_li" v-for="item in list" :key="item.name">
              <div class="cent_left">
                <img src="@/assets/pblic/yuan.png" alt />
                <div class="time1">{{item.month}}月</div>
              </div>
              <div class="cent_right">
                ￥
                <span>{{item.total}}</span>
              </div>
            </div>
          </div>

          <div class="noshuju" v-if="info.count==0">暂无数据~</div>
        </div>
      </div>
    </div>
    <van-popup
      v-model="showtime"
      position="bottom"
      :style="{ height: '8rem', borderRadius: '20px 20px 0px 0px' }"
    >
      <div v-if="active==1">
        <van-datetime-picker
          v-if="active==1"
          v-model="currentDate"
          type="year-month"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          item-height="1.5rem"
          @cancel="cdcancel"
          @confirm="cdconfirm"
        />
      </div>
      <div v-if="active==2">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          item-height="1.5rem"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      active: 1,
      year: "",
      month: "",
      info: {},
      list: [],
      showtime: false,
      minDate: new Date(2020, 8, 1),
      maxDate: new Date(2025, 9, 1),
      currentDate: new Date(),
      token:"",
      columns: [2020, 2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029],
    };
  },
  mounted() {
    this.token = window.localStorage.getItem("token")
    var nowDate = new Date();
    (this.year = nowDate.getFullYear()), (this.month = nowDate.getMonth() + 1);
    console.log(this.year, this.month);
    this.nianyuehttp();
  },
  methods: {
    goback() {
      this.$router.back();
    },
    nianyuehttp() {
      axios
        .post("/index/user/cost_detail", this.$qs.stringify({
          token: this.token,
          year: this.year,
          month: this.month,
        }))
        .then((res) => {
          if (res.data.code === 1) {
            console.log(res.data, 987654);
            this.info = res.data.data.detail;
            this.list = res.data.data.list;
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    nian() {
      axios
        .post("/index/user/cost_detail", this.$qs.stringify({
          token: this.token,
          year: this.year,
        }))
        .then((res) => {
          console.log(res.data);
          if (res.data.code === 1) {
            this.info = res.data.data.detail;
            this.list = res.data.data.list;
          } else {
            this.$toast(res.data.msg);
          }
        });
    },
    changeactive(type) {
      this.active = type;
      if (this.active == 1) {
        this.nianyue();
      } else {
        this.nian();
      }
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}`;
      } else if (type === "month") {
        return `${val}`;
      }
      return val;
    },
    nianyue() {
      this.showtime = true;
    },
    cdcancel() {
      this.showtime = false;
    },
    cdconfirm(value) {
      var time = new Date(value);
      this.year = time.getFullYear();
      this.month = time.getMonth() + 1;
      this.nianyuehttp();
      this.cdcancel();
    },
    onConfirm(value) {
      this.showtime = false;
      this.year = value;
      this.nian();
    },
    onCancel() {
      this.showtime = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.slot {
  width: 100%;
  height: 44px;
  .top {
    width: 100%;
    height: 44px;
    display: flex;display: -webkit-flex;
    justify-content: center;
    align-items: center;
    background: #fdd40a;
    position: fixed;
    top: 0;
    left: 0;
    .return {
      width: 38px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;display: -webkit-flex;
      justify-content: center;
      align-items: center;
      img {
        width: 8px;
        height: 15px;
      }
    }
    span {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      line-height: 44px;
    }
  }
}
.main {
  width: 100%;
  .top_title {
    width: 100%;
    height: 50px;
    background: #fdd40a;
    display: flex;display: -webkit-flex;
    border-bottom: 1px solid #f8f8f8;
    .li {
      width: 50%;
      height: 100%;
      display: flex;display: -webkit-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      .p1 {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 15px;
      }
    }
    .li1 {
      width: 50%;
      height: 100%;
      display: flex;display: -webkit-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      .p1 {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        line-height: 18px;
      }
      .span {
        width: 28px;
        height: 4px;
        background: #000000;
        border-radius: 2px;
        position: absolute;
        bottom: 0;
      }
    }
  }
  .main3 {
    width: 100%;
    height: 120px;
    margin-top: -1px;
    background-image: url("../../assets/pblic/bj2.png");
    .center {
      width: 345px;
      height: 100%;
      margin: auto;
      display: flex;display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      .cont_left {
        .cd_top {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 13px;
          opacity: 0.8;
        }
        .cd_price {
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          line-height: 15px;
          margin-top: 20px;
          span {
            font-size: 22px;
          }
        }
      }
      .cont_right {
        display: flex;display: -webkit-flex;
        align-items: center;
        .time {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 16px;
        }
        .icon {
          margin-left: 10px;
        }
      }
    }
  }
  .main4 {
    width: 100%;
    background: white;
    border-radius: 10px 10px 0px 0px;
    margin-top: -10px;
    .noshuju {
      width: 100%;
      height: 100px;
      font-size: 16px;
      text-align: center;
      line-height: 100px;
      color: #444444;
    }
    .cd_li {
      width: 345px;
      height: 70px;
      margin: auto;
      display: flex;display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f8f8f8;
      .cent_left {
        display: flex;display: -webkit-flex;
        align-items: center;
        img{
          width: 1rem;
          height: 1rem;
        }
        .time1 {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #222222;
          line-height: 16px;
          margin-left: 10px;
        }
      }
      .cent_right {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ff521f;
        line-height: 13px;
        span {
          font-size: 17px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>